<template>
  <div class="app-container">
    <div class="tabel-title">
      <div style="border: 0 solid #ccc;width: 100%;">
        <el-row style="margin: 10px 0;">
          <el-col :span="8" class="tabel-title-text">
            <label>汇总数据类型</label>
            <span style="margin-left: 20px;">
              <EnumTag :enum-list="getEnumList('BudgetCollectType')" :enum-key="obj.budgetTwoCollectType" />
            </span>
          </el-col>
          <el-col :span="8" class="tabel-title-text">
            <label>汇总数据编码</label>
            <span style="margin-left: 20px;">{{obj.budgetTwoCollectCode}}</span>
          </el-col>
          <el-col :span="8" class="tabel-title-text">
            <label>汇总数据名称</label>
            <span style="margin-left: 20px;">{{obj.budgetTwoCollectName}}</span>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0;">
          <el-col :span="8" class="tabel-title-text">
            <label>汇总金额</label>
            <span style="margin-left: 20px;">{{ obj.totalAmount }}</span>
          </el-col>
          <!-- <el-col :span="8" class="tabel-title-text">
            <label>一上批复金额</label>
            <span style="margin-left: 20px;">{{ obj.approveAmount }}</span>
          </el-col> -->
          <el-col :span="8" class="tabel-title-text">
            <label>预算域同步状态</label>
            <span style="margin-left: 20px;">
              <EnumTag :enum-list="getEnumList('BudgetCollectSync')" :enum-key="obj.ysySync" />
            </span>
          </el-col>
        </el-row>
        <el-row style="margin: 10px 0;">
          <el-col :span="8" class="tabel-title-text">
            <label>预算域同步结果</label>
            <span style="margin-left: 20px;">{{obj.ysySyncResult}}</span>
          </el-col>
          <el-col :span="8" class="tabel-title-text">
            <label>创建时间</label>
            <span style="margin-left: 20px;">{{obj.createTime}}</span>
          </el-col>
          <el-col :span="8" class="tabel-title-text">
            <label>最后修改时间</label>
            <span style="margin-left: 20px;">{{obj.updateTime}}</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-divider />
    <div style="border: 0 solid #ccc;width: 100%;text-align: right;padding: 0 10px;">
      <el-form>
        <p class="tabel-title-text">批复总金额(元)：<span style="color: #E6A23C;font-weight: bold;">{{ remindAmount }}</span></p>
        <p class="tabel-title-text">剩余可批准金额(元)：<span style="color: #E6A23C;font-weight: bold;">{{ limitAmount }}</span></p>
      </el-form>
    </div>
    <el-form class="my-form" ref="obj" :model="obj" :rules="rules">
      <el-table :data="budgetTwoList" border show-summary :summary-method="getSummaries">
        <el-table-column prop="code" label="项目编号" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="applyOneFund" label="一上预算申报金额" />
        <el-table-column prop="approveOneFund" label="一下预算批复金额" />
        <el-table-column prop="totalAmount" label="二上预算调整金额" />
        <el-table-column prop="approveTwoFund" label="二下批准金额(元)">
          <template v-slot="{row}">
            <el-form-item prop="approveTwoFund">
              <el-input v-model="row.approveTwoFund" type="number" placeholder="请输入批复金额" @change="refreshRemindAmount" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="btn">
      <el-button type="primary" @click="doSave">保存</el-button>
    </div>
  </div>
</template>
<script>
import baseConfig from '@/mixins/baseConfig'
import {doGet, doPost} from '@/config/http'
import {alertErrorMsg, notifySuccess} from "@/config/common";

const emptyObj = {
}

export default {
  name: 'budgetTwoControlEdit_nocache',
  components: {},
  mixins: [baseConfig],
  data() {
    return {
      svc: 'icims-api',
      obj: Object.assign({}, emptyObj),
      routes: [],
      dialogVisible: false,
      dialogType: 'add',
      dialogTypeTitle: '新增',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      loading: false,
      list: null,
      total: 0,
      listLoading: false,
      listQuery: {
      },
      selectionList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
      },
      limitAmount: 0,
      remindAmount: 0,
      budgetTwoList: [],
    }
  },
  computed: {
    routesData() {
      return this.routes
    },
  },
  created() {
    this.initObj()
  },
  methods: {
    async initObj() {
      if (this.$route.query.id) {
        let id = this.$route.query.id
        this.obj = await doGet(this.svc, '/budget-two-collect/' + id, {}, true);
        this.remindAmount = this.obj.approveAmount
        doGet(this.svc, '/budget-two-collect-relation/listByField', {field: 'budgetTwoCollectId', values: id}, false).then(res => {
          let ids = []
          res.map(item => {
            ids.push(item.budgetTwoId)
          })
          if (ids.length > 0) {
            doGet(this.svc, '/customBudgetTwo/queryBudgetTwoByIds/' + ids.join(','), {}, true).then(res => {
              if (res && res.length > 0) {
                this.budgetTwoList = res
                this.refreshRemindAmount()
              }
            })
          }
        })
      }
      this.refreshRemindAmount()
    },
    async doSave(formName) {
      // this.refreshRemindAmount()
      console.log('this.limitAmount',this.limitAmount)
      if (this.limitAmount < 0) {
        alertErrorMsg('金额输入超过了批复总金额')
        return
      }
      doPost(this.svc, '/customBudgetTwo/adjustBudgetTwoAmount', {items:this.budgetTwoList}).then(_ => {
        notifySuccess('操作成功')
        this.goTargetByName('budgetTwoControl', {}, true)
      })
    },
    refreshRemindAmount() {
      this.limitAmount = this.remindAmount
      this.budgetTwoList.forEach(item => {
        this.limitAmount -=  item.approveTwoFund ? item.approveTwoFund : 0
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      // console.log('columns',columns)
      // console.log('data',data)
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0 ) {
          sums[index] = '合计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        // console.log('values-----',values)
        if (!values.every((value) => Number.isNaN(value))) {
          sums[index] = `${values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!Number.isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)}`
        } else {
          sums[index] = 'N/A'
        }
      })
      // console.log('sums-----------',sums)
      return sums
    },
  }
}
</script>
<style>
.el-table__footer-wrapper tr td:last-of-type {
  /* color: #F56C6C; */
  font-weight: bold;
  font-size: 16px;
}
</style>
<style scoped>
.tabel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0
}
.tabel-title-form {
  display: flex;
  align-items: center;
}
.tabel-title-form label {
  color: #409EFF;
  font-size: 16px;
  width: 250px;
}
.tabel-title-text span{
  color: #888;
}
.btn {
  margin-top: 40px;
  text-align: center;
}
</style>
